<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="favicon.ico">
		<title>个人主页</title>
		<!-- Bootstrap core CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
		<!-- Custom styles for this template -->
		<link rel="stylesheet" href="css/style1.css">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body id="page-top">
		<!-- Navigation -->
		<nav class="navbar navbar-default">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header page-scroll">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand page-scroll" href="#page-top"><img src="images/demo/QQ图片20190908184508.jpg" alt="" style="width: 40px;height: 40px;border-radius: 50%">
					</a><span class="jl">个人主页</span>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li class="hidden">
							<a href="#page-top" ></a>
						</li>
						<li>
							<a class="page-scroll" href="#team">个人简介</a>
						</li>
						<li>
							<a class="page-scroll" href="#portfolio">作品展示</a>
						</li>
						<li>
							<a class="page-scroll" href="#about">技能掌握</a>
						</li>
						<li>
							<a class="page-scroll" href="#contact">联系我们</a>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>
		<section id="team">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 text-center">
						<div class="section-title">
							<h2>个人简介</h2>
						</div>
					</div>
				</div>
				<div class="row c2">
					<!-- team member item -->
					<div class="col-md-3">
						<div class="team-item">
							<div class="team-image">
								<img src="images/education.png" class="img-responsive" alt="author">
							</div>
							<div class="team-text">
								<h3> 学历</h3>
								<hr>
								<div class="team-position"></div>
								<p>大专</p>
							</div>
						</div>
					</div>
					<!-- end team member item -->
					<!-- team member item -->
					<div class="col-md-3">
						<div class="team-item">
							<div class="team-image">
								<img src="images/age.png" class="img-responsive" alt="author">
							</div>
							<div class="team-text">
								<h3>年龄</h3>
								<hr>
								<div class="team-position"></div>
								<p>19</p>
							</div>
						</div>
					</div>
					<!-- end team member item -->
					<!-- team member item -->
					<div class="col-md-3">
						<div class="team-item">
							<div class="team-image">
								<img src="images/location.png" class="img-responsive" alt="author">
							</div>
							<div class="team-text">
								<h3>籍贯</h3>
								<hr>
								<div class="team-position"></div>
								<p>河北 廊坊</p>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="team-item">
							<div class="team-image">
								<img src="images/status.png" class="img-responsive" alt="author">
							</div>
							<div class="team-text">
								<h3>目前</h3>
								<hr>
								<div class="team-position"></div>
								<p>在校</p>
							</div>
						</div>
					</div>
					<!-- end team member item -->
				</div>

			</div>
		</section>
		<section id="portfolio">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 text-center">
						<div class="section-title">
							<h2>作品展示</h2>
						</div>
					</div>
				</div>
				<div class="row row-0-gutter">
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba">
								<img src="images/云巴网.png" alt="img02" class="img-responsive">
								<figcaption>
									<h2>云巴网</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-1">云巴网</a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba c1">
								<img src="images/them.png" alt="img02" class="img-responsive" >
								<figcaption>
									<h2>them网</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-2">them网</a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
				</div>
				<div class="row row-0-gutter">
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba ">
								<img src="images/genius.png" alt="img02" class="img-responsive">
								<figcaption>
									<h2>Genius网站</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-3">Genius网站</a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba ">
								<img src="images/恒望.png" alt="img02" class="img-responsive">
								<figcaption>
									<h2>HENGWANG网站</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-4">HENGWANG网站</a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
				</div>
				<div class="row row-0-gutter">
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba">
								<img src="images/腾讯新闻.png" alt="img02" class="img-responsive">
								<figcaption>
									<h2>腾讯网</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-5">腾讯网</a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
					<!-- start portfolio item -->
					<div class="col-md-6 col-0-gutter">
						<div class="ot-portfolio-item">
							<figure class="effect-bubba">
								<img src="images/Repute.jpg" alt="img02" class="img-responsive">
								<figcaption>
									<h2>Repute网站</h2>
									<a href="#" data-toggle="modal" data-target="#Modal-6"></a>
								</figcaption>
							</figure>
						</div>
					</div>
					<!-- end portfolio item -->
				</div>
			</div><!-- container -->
		</section>

		<section id="about" class="mz-module">
			<div class="container light-bg">
				<div class="row">
					<div class="col-lg-12 text-center">
						<div class="section-title">
							<h2>技能掌握</h2>
						</div>
					</div>
				</div>
				<div class="row">

					<div class="col-md-6">
						<!-- skill bar item -->
						<div
								class="skillbar-item">
							<div class="skillbar" data-percent="90%">
								<h3>html5</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 90%;">
									</div>
								</div>
							</div>
						</div>
						<!-- skill bar item -->
						<div class="skillbar-item">
							<div class="skillbar" data-percent="80%">
								<h3>css3</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 80%;">
									</div>
								</div>
							</div>
						</div>
						<!-- skill bar item -->
						<div class="skillbar-item">
							<div class="skillbar" data-percent="65%">
								<h3>JavaScript</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 65%;">
									</div>
								</div>
							</div>
						</div>
						<!-- skill bar item -->
						<div class="skillbar-item">
							<div class="skillbar" data-percent="70%">
								<h3>jqurey</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 70%;">
									</div>
								</div>
							</div>
						</div>
						<div class="skillbar-item">
							<div class="skillbar" data-percent="85%">
								<h3>bootstrap</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 85%;">
									</div>
								</div>
							</div>
						</div>
						<div class="skillbar-item">
							<div class="skillbar" data-percent="80%">
								<h3>swiper</h3>
								<div class="skillbar-bar">
									<div class="skillbar-percent" style="width: 80%;">

									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6 text-center">
						<div class="mz-about-container">
							<p>深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</p>
							<p>熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；</p>
							<p>熟悉JavaScript编程语言</p>
							<p>熟练掌握jqurey开发页面特效，提高页面开发效率；</p>
							<p>熟练掌握bootstrap框架及源码的使用方法；</p>
							<p>熟练使用Swiper框架开发页面动画效果，有一定开发经验；</p>
						</div>
					</div>
				</div>
				<div class="tlinks">Collect from <a href="http://www.cssmoban.com/"  title=""></a></div>
				<div class="row row-0-gutter">
					<!-- about module -->
					<div class="col-md-2 col-0-gutter mz-about-default text-center">
						<div class="mz-module-about">
							<i class="fa fa-briefcase ot-circle"></i>
							<h3>html5</h3>
						</div>
					</div>
					<!-- end about module -->
					<!-- about module -->
					<div class="col-md-2 col-0-gutter mz-about-dark text-center">
						<div class="mz-module-about">
							<i class="fa fa-photo ot-circle"></i>
							<h3>css3</h3>
						</div>
					</div>
					<!-- end about module -->
					<!-- about module -->
					<div class="col-md-2 col-0-gutter mz-about-default text-center">
						<div class="mz-module-about">
							<i class="fa fa-camera-retro ot-circle"></i>
							<h3>JavaScript</h3>
						</div>
					</div>
					<!-- end about module -->
					<!-- about module -->
					<div class="col-md-2 col-0-gutter mz-about-dark text-center">
						<div class="mz-module-about">
							<i class="fa fa-cube ot-circle"></i>
							<h3>Jqurey</h3>
						</div>
					</div>
					<div class="col-md-2 col-0-gutter mz-about-default text-center">
						<div class="mz-module-about">
							<i class="fa fa-cube ot-circle"></i>
							<h3>bootstrap</h3>
						</div>
					</div>
					<div class="col-md-2 col-0-gutter mz-about-dark text-center">
						<div class="mz-module-about">
							<i class="fa fa-cube ot-circle"></i>
							<h3>swiper</h3>
						</div>
					</div>
					<!-- end about module -->
				</div>
			</div>
			<!-- /.container -->
		</section>



		<section id="contact">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 text-center">
						<div class="section-title">
							<h2>联系我们</h2>
							<p>
								If you have some Questions or need Help! Please Contact Us!
								<br>
								如果你有问题或需要帮助！请联系我们！</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12 text-center">
						<form name="sentMessage" id="contactForm" novalidate>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<p class="help-block text-danger">手机:<span>15132624642</span></p>
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<p class="help-block text-danger">QQ:<span>1693650945</span></p>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<p class="help-block text-danger">邮箱:<span>1693650945@qq.com</span></p>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</section>
		<p id="back-top">
			<a href="#top"><i class="fa fa-angle-up"></i></a>
		</p>
		<footer>
			<div class="container text-center">
				<p> Copyright   <span>© 2019 - 2026 何福东</span> 2019.com  <a href="http://www.cssmoban.com/" title="网页模板" target="_blank"></a> </p>
			</div>
		</footer>

		<!-- Modal for portfolio item 1 -->
		<div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-1">Dean & Letter</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/web_site/"><img src="images/云巴网.png" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>bootstrap</span></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal for portfolio item 2 -->
		<div class="modal fade" id="Modal-2" tabindex="-1" role="dialog" aria-labelledby="Modal-label-2">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-2">Startup Framework</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/them_use/"><img src="images/them.png" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>bootstrap</span></div>
						<p></p>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal for portfolio item 3 -->
		<div class="modal fade" id="Modal-3" tabindex="-1" role="dialog" aria-labelledby="Modal-label-3">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-3">Lamp & Velvet</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/genius/"><img src="images/Genius.jpg" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>bootstrap</span></div>
						<p></p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal for portfolio item 4 -->
		<div class="modal fade" id="Modal-4" tabindex="-1" role="dialog" aria-labelledby="Modal-label-4">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-4">Smart Name</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/hengwang/#"><img src="images/HENGWANG.jpg" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>bootstrap</span></div>
						<p></p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="Modal-5" tabindex="-1" role="dialog" aria-labelledby="Modal-label-5">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-5">Fast People</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/tengxunwang/"><img src="images/腾讯新闻.png" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>boostrap</span></div>
						<p></p>
					</div>
					<div class="modal-foter">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="Modal-6" tabindex="-1" role="dialog" aria-labelledby="Modal-label-5">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="Modal-label-6">Fast People</h4>
					</div>
					<div class="modal-body">
						<a href="http://hefudong123.gitee.io/repute/"><img src="images/Repute.jpg" alt="img01" class="img-responsive" /></a>
						<div class="modal-works"><span>boostrap</span></div>
						<p></p>
					</div>
					<div class="modal-foter">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Bootstrap core JavaScript
			================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/theme-scripts.js"></script>
	</body>
</html>